<template>
  <div>
    <search-wrapper>
      <div slot="searchRight">
        <a-button type="primary" @click="exportFile">
          <a-icon type="cloud-download" />
          导出
        </a-button>
      </div>
    </search-wrapper>
    <div class="show">
      <div class="show-title">
        <p></p>
        <p>列表展示</p>
      </div>
      <div>
        <div class="show-name">
          <p>
            {{ userTitle.username }}旗下：{{ userTitle.role
            }}{{ userTitle.member }}人
          </p>
          <img src="@/assets/imgAdmin/star.png" alt="" />
          <img src="@/assets/imgAdmin/star.png" alt="" />
          <img src="@/assets/imgAdmin/star.png" alt="" />
          <div>
            总金额：<span>{{ userTitle.total_money }}</span>
          </div>
        </div>
      </div>
    </div>
    <business-card :initInfo="initInfo"></business-card>
  </div>
</template>

<script>
export default {
  name: "index",
  components: {
    searchWrapper: () => import("@/components/searchWrapper/index"),
    businessCard: () => import("@/components/businessCardPage/index")
  },
  data() {
    return {
      searchList: [
        {
          type: "input",
          label: "用户名",
          placeholder: "用户名",
          name: "title"
        },
        {
          type: "input",
          label: "账号",
          placeholder: "账号",
          name: "num"
        }
      ],
      setting: {},
      searchInfo: {
        title: "",
        status: ""
      },
      initInfo: [],
      userTitle: {},
      id: ""
    };
  },
  methods: {
    exportFile() {
      let url = "";
      if (this.id) {
        url = this.$api.getZtMember + "?member_id=" + this.id + "&excel=1";
      } else {
        url =
          this.$api.getSubordinate +
          "?role=" +
          this.$route.query.role +
          "&mobile=" +
          this.$route.query.mobile +
          "&excel=1";
      }
      const a = document.createElement("a"); // 创建a标签
      a.setAttribute("download", ""); // download属性
      a.setAttribute("href", url); // href链接
      a.click(); // 自执行点击事件
    },
    getInfo() {
      this.$ajax
        .get(this.$api.getSubordinate, {
          role: this.$route.query.role,
          mobile: this.$route.query.mobile
        })
        .then(res => {
          for (let item of res.data) {
            if (item.money === null) {
              item.money = 0;
            }
          }
          this.initInfo = res.data;
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
      this.$ajax
        .post(this.$api.getMemberInfo, {
          mobile: this.$route.query.mobile
        })
        .then(res => {
          if (res.data.info) {
            this.$notification.error({
              message: res.data.info
            });
          } else {
            this.userTitle = res.data.list;
            for (let item of res.data.list.grade) {
              if (this.$route.query.role === item.role) {
                this.userTitle.role = item.name;
                this.userTitle.member = item.total_member;
              }
            }
            this.$store.dispatch("changeSearchResult", res.data.list);
          }
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    },
    getDirectDrive() {
      this.$ajax
        .get(this.$api.getZtMember, {
          member_id: this.id
        })
        .then(res => {
          for (let item of res.data.list) {
            if (item.money === null) {
              item.money = 0;
            }
          }
          this.initInfo = res.data.list;
          this.userTitle.username = res.data.username;
          this.userTitle.role = "直推会员 ";
          this.userTitle.member = res.data.count_member;
          this.userTitle.total_money = res.data.total_money;
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    }
  },
  created() {
    this.id = this.$route.query.id;
    if (this.id) {
      this.getDirectDrive();
    } else {
      this.getInfo();
    }
  }
};
</script>

<style scoped lang="less">
.show {
  padding: 30px 0 0 36px;
}
.show-title {
  display: flex;
  align-items: center;
  font-size: 24px;
  color: #323232;
}
.show-title > p:first-child {
  width: 5px;
  height: 20px;
  background-color: #42a5fe;
  border-radius: 2px;
  margin-right: 12px;
}
.show-name {
  margin-top: 28px;
  font-size: 24px;
  color: #42a5fe;
  display: flex;
  align-items: center;
}
.show-name > p {
  margin-right: 15px;
}
.show-name > img {
  margin-right: 3px;
}
.show-name > div {
  margin-left: 100px;
  color: #ff5c57;
}
</style>
